$(() => {
  //get dom elem
  let $width = $('#width'),
    $height = $('#height'),
    // $btnCal = $('#calc'),
    $form = $('#main'),
    $perimeter = $('#perimeter'),
    $widthvalidate = $('#width-validate'),
    $heightvalidate = $('#height-validate'),
    $area = $('#area');
  // 字段级
  // $(document).keypress((e) => {
  //   console.log(e.key, e.target.value, e.target.selectionStart);

  //   if (!regkeycode(e.key, e.target.value, e.target.selectionStart)) {
  //     e.preventDefault();
  //   }
  // })
  // $width.focusout(() => {
  //   if (!validate($width, $widthvalidate)) {
  //     $width.select();
  //   }
  // })
  // $height.focusout(() => {
  //   if (!validate($height, $heightvalidate)) {
  //     $height.select();
  //   }
  // })
  $form.submit((e) => {
    e.preventDefault();
    let w = Number($width.val()),
      h = Number($height.val());
    // 表单级
    // if (validate($width, $widthvalidate) && validate($height, $heightvalidate)) {
      let p = roundFractional((w + h) * 2, 2),
        a = roundFractional(w * h, 2);

      $perimeter.val(p);
      $area.val(a);

    // }
  });
});

function validate(input, output) {
  if (input.val() === "") {
    output.html('该字段不能为空');
    return false;
  } else {
    output.html("");
  }

  let val = Number(input.val());
  let numreg = /^-?(0|[1-9]\d*)(\.\d*)?([eE][+-]?\d+)?$/;
  let morenumreg = /0\d+/;
  if (!numreg.test(val)||!morenumreg.test(val)) {
    output.html('该字段应该是数值');
    return false;
  } else {
    output.html('');
  }

  if (val < 0) {
    output.html('该字段不能小于零');
    return false;
  } else {
    output.html("");
  }

  return true;
}

function roundFractional(x, n) {
  return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
}
// 当前输入字符 字段 长度
function regkeycode(key, value, length) {
  // 先除去除了0~9 十个数字、小数点、负号和科学计数法的 e 和 E之外的输入
  let numreg = /[abcdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/;
  if (numreg.test(key)) return false;
  // 当输入小数点的时候,如果所在位置不是
  if (key === '.') {
    // 如果上来输.肯定不对
    if (length === 0) return false
    // -1则意味着之前没出现这次输入时第一次
    if (value.indexOf('.') !== -1) return false
    // 总不能小数点前一堆e
    if (length > 0 && /[-eE]/.test(value.slice(0, length))) return false
  }
  // 当输入E和e的时候
  if (key === 'e' || key === 'E') {
    // 老规矩上来输入e错误
    if (length === 0) return false
    // 只能出现一次
    if (value.indexOf('e') !== -1 || value.indexOf('E') !== -1) return false
    // e后面不能出现小数点
    if (length > 0 && /[-.]/.test(value.slice(length - 1, length))) return false
  }
  // 档输入负号的时候
  if (key === '-') {
    if (length === 0) return false
    if (value.indexOf('-') !== -1) return false
    // -后面是数字
    if (length > 0 && /[0-9]/.test(value.slice(length - 1, length))) return false
  }
  return true;
}
// 表单级已经在课上完成
// 字段级校验，字段级较为容易，因为是在表单级的基础上的修改
// 字符级情况太多要列举出来以免遗漏